<template>
	<view class="container">
		<u-toast ref="uToast" />
		<u-select v-model="genre" mode="single-column" :list="genre_list" @confirm="submit"></u-select>
		<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
		<u-select v-model="boolen" :mode="select_type" :list="district_list" @confirm="ensure"></u-select>
		<u-navbar :is-back="true" title="发布通知" back-icon-color='#333333' height="50" :border-bottom="false">
			<view class="" style="margin-left: 600rpx; display: flex;align-content: center;" @click="issure(2)">
				<image src="../../static/tupian89.png" mode="widthFix" style="width: 30rpx;"></image>
			</view>
		</u-navbar>
		<u-mask :show="display">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="tanchu">
						{{popup_content}}
					</view>
					<view class="anniu">
						<view class="" @click="display=false">
							取消
						</view>
						<view class="" @click="notifyAdd">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<view class="list">
			<view class="issuer">
				<text>发布人</text>
				<text>{{full_name}}</text>
			</view>
			<view class="select_level">
				<text>选择级别</text>
				<text>{{level}}</text>
				<text @click="show=true"></text>
			</view>
			<view class="select">
				<text>选择对应级别</text>
				<text>{{text}}</text>
				<text @click="select_level"></text>
			</view>
			<view class="select_type">
				<text>选择类型</text>
				<text>{{select_genre}}</text>
				<text @click="genre=true"></text>
			</view>
			<view class="theme">
				<text>主题</text>
				<u-input v-model="form.title" style="margin-left:200rpx; width: 200rpx;" :type="type" placeholder="单行输入"
					:border="border" input-align="right" />
			</view>
			<textarea value=""
				style="width: 94%; margin-left:3%; margin-top: 20rpx; height: 383rpx; color: #999999; font-size: 26rpx;"
				v-model="form.text" placeholder="请输入正文" />
			<view class="add_picture">
				<view class="per_photo" v-for="(sub,num) in imgArr" :key="num">
					<image :src="sub" mode="widthFix"></image>
				</view>
				<image src="../../static/tupian107.png" mode="widthFix" @click="addimg" class="add"></image>
			</view>
			<view class="blank" style="width: 94%; margin-left: 3%; height: 120rpx;">
			</view>
		</view>
		<view class="confirm">
			<view class="verify" @click="issure(1)">
				{{verify}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import request from '../../request.js'
	export default {
		data() {
			return {
				imgArr: [],
				verify: '保存到草稿箱',
				content: '',
				border: false,
				display: false,
				select_type: 'mutil-column-auto',
				boolen: false,
				type: 'text',
				theme_content: '',
				select_genre: '',
				show: false,
				genre: false,
				list: [{
						value: 1,
						label: '全校'
					},
					{
						value: 2,
						label: '年级'
					},
					{
						value: 3,
						label: '班级'
					}
				],
				genre_list: [{
						value: 1,
						label: '一般'
					},
					{
						value: 2,
						label: '紧急'
					},
					{
						value: 3,
						label: '重要'
					}
				],
				level: '',
				num: '',
				district_list: [],
				text: '',
				popup_content: '',
				form: {
					type: '',
					title: '',
					level: '',
					pics: '',
					text: '',
					is_show: '',
					is_temp: '',
					key_id: ''
				},
			}
		},
		onLoad() {
			this.$store.dispatch('getTodos');
		},
		computed: {
			...mapState(['full_name']),
		},
		methods: {
			issure(param) {
				let str = '';
				if (this.imgArr) {
					str = this.imgArr.join(',');
					this.form.pics = str;
				} else {
					str = '';
					this.form.pics = str;
				}
				// $toLink('../school_notification/school_notification',{})
				this.form.is_show = 1;
				switch (param) {
					case 1:
						this.form.is_temp = 1;
						this.popup_content = '确定保存到邮箱?';
						this.display = true;
						break;
					case 2:
						this.form.is_temp = 0;
						this.popup_content = '确定发布?';
						this.display = true;
						break;

				}
			},
			notifyAdd() {
				this.display = false;
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/school_notify/add',
					method: 'post',
					data: {
						...this.form,
					},
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data);
							_this.$toLink('../school_notification/school_notification', {}, 2);
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			submit(e) {
				this.select_genre = e[0].label;
				this.form.level = e[0].label;
			},
			ensure(e) {
				console.log(e);
				switch (this.num) {
					case 1:
						this.text = `${e[0].label}`;
						this.form.key_id = e[0].value;
						break;
					case 2:
						this.text = `${e[0].label}${e[1].label}`;
						this.form.key_id = e[1].value;
						break;
					case 3:
						this.text = `${e[0].label}${e[1].label}${e[2].label}`;
						this.form.key_id = e[2].value;
						break;
				}
			},
			confirm(e) {
				console.log(e[0].label);
				this.level = e[0].label;
				this.form.type = e[0].label;
				switch (e[0].value) {
					case 1:
						this.num = 1;
						break;
					case 2:
						this.num = 2;
						break;
					case 3:
						this.num = 3;
						break;
				}
				console.log(this.num);
				this.districtList();
			},
			addimg() {
				let _this = this;
				let base_url = uni.getStorageSync('host');
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						const uploadTask = uni.uploadFile({
							formData: {
								image: res.tempFilePaths[0],
							},
							url: base_url + 'system/image/upload',
							filePath: res.tempFilePaths[0],
							name: 'image',
							success: function(res) {
								let data = JSON.parse(res.data)
								console.log(data.data.url);
								_this.imgArr.push(data.data.url);
							}
						});
					}
				});
			},
			select_level() {
				if (this.num) {
					this.boolen = true;
				} else {
					this.$refs.uToast.show({
						title: '请先选择级别',
						type: 'warning',
					})
				}
			},
			districtList() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				this.district_list = [];
				request({
					url: base_url + 'teacher/general/schoolDistrictList',
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data);
							console.log(this.num);
							switch (_this.num) {
								case 1:
									res.data.data.forEach((item, index) => {
										_this.district_list.push({
											label: item.name,
											value: item.school_district_id,
										})
									})
									break;
								case 2:
									res.data.data.forEach((item, index) => {
										_this.district_list.push({
											label: item.name,
											value: item.school_district_id,
											children: [],
										})
										_this.gradeLists(index);

									})
									break;
								case 3:
									res.data.data.forEach((item, index) => {
										_this.district_list.push({
											label: item.name,
											value: item.school_district_id,
											children: [],
										})
										_this.gradeLists(index);

									})
									break;
							}
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			gradeLists(param1) {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let str = param1;
				let _this = this;
				request({
					url: base_url + 'teacher/classes/gradeLists',
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data);
							console.log(_this.num);
							switch (_this.num) {
								case 2:
									res.data.data.forEach((item, index) => {
										_this.district_list[str].children.push({
											label: item.name,
											value: item.grade_id,
										})
									})
									break;
								case 3:
									res.data.data.forEach((item, index) => {
										_this.district_list[str].children.push({
											label: item.name,
											value: item.grade_id,
											children: [],
										})
										_this.classesLists(item.grade_id, index, str);
									})
									break;
							}
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			classesLists(param1, param2, param3) {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/classes/classesLists',
					method: 'post',
					data: {
						grade_id: param1
					},
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data);
							res.data.data.forEach((item, index) => {
								_this.district_list[param3].children[param2].children.push({
									label: item.classes_name,
									value: item.classes_id,
								})
							})
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},

		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		background-color: #F2F2F2;
		overflow: hidden;

		.warp {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			height: 100%;

			.rect {
				margin-top: 450rpx;
				border-radius: 10rpx;
				width: 480rpx;
				height: 250rpx;
				background-color: #fff;

				.tanchu {
					width: 100%;
					height: 150rpx;
					font-size: 33rpx;
					color: #3E3E3E;
					text-align: center;
					line-height: 150rpx;
				}

				.anniu {
					width: 100%;
					height: 100rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;

					view {
						border-radius: 30rpx;
						width: 150rpx;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						font-size: 26rpx;

						&:nth-child(1) {
							color: #2C78FE;
							margin-left: 15rpx;
							border: 1px solid #2C78FE;
							background: #fff;

						}

						&:nth-child(2) {
							color: #fff;
							margin-right: 15rpx;
							background: linear-gradient(to right, #2C78FE, #32B0FF);
						}


					}
				}
			}
		}

		.list {
			width: 710rpx;
			background-color: #fff;
			border-radius: 12rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;

			.issuer {
				width: 94%;
				margin-left: 3%;
				height: 85rpx;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				text {
					font-size: 26rpx;

					&:nth-child(1) {
						margin-left: 8rpx;
						color: #333333;
					}

					&:nth-child(2) {
						width: 580rpx;
						color: #333333;
						text-align: right;
					}


				}

			}

			.select_level {
				width: 94%;
				margin-left: 3%;
				height: 85rpx;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				text {
					font-size: 26rpx;
					color: #333333;

					&:nth-child(1) {
						margin-left: 8rpx;
					}

					&:nth-child(2) {
						text-align: right;
						width: 490rpx;
					}

					&:nth-child(3) {
						width: 0rpx;
						margin-left: 20rpx;
						margin-top: 20rpx;
						height: 0rpx;
						border-width: 18rpx 18rpx 18rpx 18rpx;
						border-color: #ccc transparent transparent transparent;
						border-style: solid;
					}
				}

			}

			.select {
				width: 94%;
				margin-left: 3%;
				height: 85rpx;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				text {
					font-size: 26rpx;
					color: #333333;

					&:nth-child(1) {
						margin-left: 8rpx;
					}

					&:nth-child(2) {
						width: 440rpx;
						text-align: right;
					}

					&:nth-child(3) {
						width: 0rpx;
						margin-left: 20rpx;
						margin-top: 20rpx;
						height: 0rpx;
						border-width: 18rpx 18rpx 18rpx 18rpx;
						border-color: #ccc transparent transparent transparent;
						border-style: solid;
					}
				}
			}

			.select_type {
				width: 94%;
				margin-left: 3%;
				height: 85rpx;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				text {
					font-size: 26rpx;
					color: #333333;

					&:nth-child(1) {
						margin-left: 8rpx;
					}

					&:nth-child(2) {
						text-align: right;
						width: 490rpx;
					}

					&:nth-child(3) {
						width: 0rpx;
						margin-left: 20rpx;
						margin-top: 20rpx;
						height: 0rpx;
						border-width: 18rpx 18rpx 18rpx 18rpx;
						border-color: #ccc transparent transparent transparent;
						border-style: solid;
					}
				}

			}

			.theme {
				width: 94%;
				margin-left: 3%;
				height: 85rpx;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				text {
					&:nth-child(1) {
						color: #333333;
						font-size: 26rpx;
						margin-left: 8rpx;
					}
				}

				input {
					&:nth-child(2) {
						margin-left: 320rpx;
						width: 250rpx;
					}
				}

			}

			.add_picture {
				width: 94%;
				margin-left: 3%;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				.per_photo {
					width: 155rpx;
					height: 155rpx;
					overflow: hidden;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 25rpx;

					image {
						&:nth-child(1) {
							width: 155rpx;
						}
					}
				}

				.add {
					width: 155rpx;
					margin-left: 25rpx;
				}
			}

		}

		.confirm {
			width: 100%;
			// margin-top: 400rpx;
			height: 220rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.verify {
				width: 240rpx;
				height: 60rpx;
				border-radius: 50rpx;
				text-align: center;
				line-height: 60rpx;
				background: #fff;
				color: #2f96fe;
				font-size: 30rpx;
			}
		}
	}
</style>
